<template>
    <div>
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item
   v-for="(item,index) in breadList"
  :key="index"
   :to="{ path:item.path }">{{item.title}}</el-breadcrumb-item>

</el-breadcrumb>
    </div>
</template>

<script>
function ifitile(arr,ntitle){
    let b=true;
    arr.forEach((item)=>{
        let {title}=item;
        if(title==ntitle){
            b=false
        }
    })
    return b
}
    export default {
         data(){
             return{
                 breadList:[]
             }
         },
         watch:{
             $route:{
                 deep:true,
                 handler(val) {
        let arr = [{ path: "/home", title: "首页" }];
        val.matched.forEach((item) => {
          let { path, title } = item.meta;
          if(ifitile(arr,title)){
         arr.push({ path, title });
          }
            
        });
           this.breadList = arr;
      },
             }
         }
    }
</script>

<style lang="less" scoped>
.el-breadcrumb{
  margin-top: 74px;
  margin-left: 210px;
}
</style>